<template>
  <section
    class="content-sidebar w-72 z-[9] mobile:hidden flex-none select-none overflow-y-auto bg-light-background pt-6 dark:bg-dark-background lg:block relative transition-all duration-200"
  >
    <div class="ml-6 mb-6">
      <div
        v-for="(item, index) in baseModule"
        :key="index"
        class="cursor-pointer"
      >
        <div
          :class="[
            'flex',
            'items-center',
            'py-2.5',
            { 'router-link-active': item.active }
          ]"
          @click="goToUrl(item, index)"
        >
          <span class="icon-active mr-2.5">
            <SvgIcon :name="item.svgName" />
          </span>
          <b class="text-active font-bold text-sm">
            {{ i18nStore.translate(item.name) }}
          </b>
        </div>
        <TransitionGroup name="slide-fade">
          <div class="mx-2" v-if="activeIndex === index">
            <div
              class="font-bold text-sm my-2"
              :class="{ 'text-[#00e1ff]': fileStore.CurrentFileType === '' }"
              @click="fileStore.setCurrentFileType('')"
            >
              全部
            </div>
            <div
              class="font-bold text-sm my-2"
              :class="{
                'text-[#00e1ff]': fileStore.CurrentFileType === 'document'
              }"
              @click="fileStore.setCurrentFileType('document')"
            >
              文档
            </div>
            <div
              class="font-bold text-sm my-2"
              :class="{
                'text-[#00e1ff]': fileStore.CurrentFileType === 'image'
              }"
              @click="fileStore.setCurrentFileType('image')"
            >
              图片
            </div>
            <div
              class="font-bold text-sm my-2"
              :class="{
                'text-[#00e1ff]': fileStore.CurrentFileType === 'video'
              }"
              @click="fileStore.setCurrentFileType('video')"
            >
              音频
            </div>
            <div
              class="font-bold text-sm"
              :class="{
                'text-[#00e1ff]': fileStore.CurrentFileType === 'Other'
              }"
              @click="fileStore.setCurrentFileType('Other')"
            >
              其他
            </div>
          </div>
        </TransitionGroup>
      </div>
    </div>
    <div class="absolute bottom-10 left-0 w-full px-4">
      <div v-if="route.path === '/myFiles'">
        <div
          class="flex items-center bg-[#00e1d9] text-white rounded-lg py-2 text-sm font-bold justify-around mb-2 cursor-pointer"
        >
          <SvgIcon name="ggll" class="flex-1"></SvgIcon>
          <p class="flex-[3_3_0%]">
            {{
              i18nStore.translate('download_points') +
              ':' +
              userInfo.userInfo.fileWalletDTO.downloadBalancePoints +
              i18nStore.translate('count')
            }}
          </p>
          <myButton @click="showPayPopup({ type: '4' })" class="flex-1">
            {{ i18nStore.translate('buy') }}
          </myButton>
          <Badge
            value="?"
            v-tooltip.top="{
              value: i18nStore.translate('down_count_tips')
            }"
            label="?"
            class="mr-2"
          ></Badge>
        </div>
        <div
          class="flex items-center bg-[#00e0a9] text-white rounded-lg py-2 text-sm font-bold justify-around mb-2 cursor-pointer"
        >
          <SvgIcon name="mf" class="flex-1"></SvgIcon>
          <p class="flex-[3_3_0%]">
            {{
              i18nStore.translate('remaining_traffic') +
              ':' +
              formatSize(
                userInfo.userInfo.fileWalletDTO.downloadBalanceBytes +
                  userInfo.userInfo.fileWalletDTO.dailyFreeDownloadBalanceBytes
              )
            }}
          </p>
          <myButton @click="showPayPopup({ type: '3' })" class="flex-1">
            {{ i18nStore.translate('buy') }}
          </myButton>
          <Badge
            value="?"
            v-tooltip.top="{
              value: i18nStore.translate('traffic_tips')
            }"
            label="?"
            severity="info"
            class="mr-2"
          ></Badge>
        </div>

        <div class="w-full my-2">
          <ProgressBar
            :value="
              (
                (userInfo.userInfo.fileWalletDTO.storageUsed /
                  userInfo.userInfo.fileWalletDTO.storageAmount) *
                100
              ).toFixed(2)
            "
            style="height: 15px"
            :show-value="false"
          />
        </div>
        <div class="flex justify-between text-sm font-bold items-center">
          <p>
            {{ i18nStore.translate('basic_space') }}:{{
              formatSize(userInfo.userInfo.fileWalletDTO.storageUsed)
            }}/{{ formatSize(userInfo.userInfo.fileWalletDTO.storageAmount) }}
          </p>
          <myButton
            class="px-2 py-2 bg-stone-300 rounded-lg cursor-pointer"
            @click="showPayPopup({ type: '2' })"
            >{{ i18nStore.translate('kuorong') }}</myButton
          >
          <Badge
            value="?"
            v-tooltip.top="{
              value: i18nStore.translate('space_tips')
            }"
            label="?"
          ></Badge>
        </div>
      </div>
      <div
        v-if="route.path === '/mySmallfiles'"
        class="flex items-center bg-[#00e0a9] text-white rounded-lg py-2 text-sm font-bold justify-around mb-2 cursor-pointer"
      >
        <SvgIcon name="lljk" class="flex-1"></SvgIcon>
        <p class="mr-2">
          {{
            formatSize(userInfo.userInfo?.fileWalletDTO.smallFileMaxSize || 0) +
            i18nStore.translate(
              userInfo.userInfo?.fileWalletDTO.smallFileMaxSize === 104857600
                ? 'Free_file_transfer_within'
                : 'Free_file_transfer_within1'
            )
          }}
        </p>
        <p class="flex items-center mr-2">
          <myButton class="mr-2" @click="showPayPopup({ type: '1' })">
            {{ i18nStore.translate('upgrade') }}
          </myButton>
          <Badge
            value="?"
            v-tooltip.top="{
              value: i18nStore.translate('overfly_tips')
            }"
            label="?"
          ></Badge>
        </p>
      </div>
    </div>
  </section>
  <!-- mobile -->
  <section
    class="content-sidebar z-[9] pc:hidden w-full flex-none select-none bg-light-background dark:bg-dark-background xl:w-56 relative transition-all duration-200 origin-top overflow-y-hidden"
    :class="flagStore.isMobileContentSidebarOpen ? 'h-[38px]' : 'h-0'"
  >
    <div class="flex w-full justify-around">
      <div
        v-for="(item, index) in baseModule"
        :key="index"
        class="cursor-pointer"
      >
        <div
          :class="[
            'flex',
            'items-center',
            'py-2.5',
            { 'router-link-active': item.active }
          ]"
          @click="goToUrl(item, index)"
        >
          <span class="icon-active mr-2.5">
            <SvgIcon :name="item.svgName" />
          </span>
          <b class="text-active text-xs font-bold">
            {{ i18nStore.translate(item.name) }}
          </b>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import {
  useI18nStore,
  useFlagStore,
  useUserInfoStore,
  useFileStore
} from '@/stores';
const i18nStore = useI18nStore();
const flagStore = useFlagStore();
const router = useRouter();
const route = useRoute();
const fileStore = useFileStore();
const activeIndex = ref(0);

const userInfo = useUserInfoStore();

const baseModule = ref([]);

watchEffect(() => {
  const path = route.path;
  baseModule.value = [
    {
      name: 'my_Smallfiles',
      svgName: 'weibiaoti',
      link: '/mySmallfiles',
      active: /^\/mySmallfiles/.test(path)
    },
    {
      name: 'my_Bigfiles',
      svgName: 'wenjianjia',
      link: '/myFiles',
      active: /^\/myFiles/.test(path)
    },
    {
      name: 'public_files',
      svgName: 'share',
      link: '/mySharedItems',
      active: /^\/mySharedItems/.test(path)
    },
    {
      name: 'garbage',
      svgName: 'rubbish',
      link: '/trash',
      active: /^\/trash/.test(path)
    }
  ];
});
const goToUrl = ({ link }, index) => {
  fileStore.setCurrentFileType('');
  activeIndex.value = index;
  router.push({ path: link });
};

function formatSize(bytes) {
  // 定义1GB的字节数
  const oneGB = 1024 ** 3;
  // 定义1MB的字节数
  const oneMB = 1024 ** 2;

  // 如果字节数大于或等于1GB
  if (bytes >= oneGB) {
    return (bytes / oneGB).toFixed(0) + 'GB';
  } else {
    return (bytes / oneMB).toFixed(0) + 'MB';
  }
}
</script>

<style scoped lang="scss">
@import './index.scss';
/* 进入动画 */
.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: opacity 0.5s ease-in-out;
}

/* 进入时元素的初始状态 */
.slide-fade-enter,
.slide-fade-leave-to {
  opacity: 0;
}

/* 可选的，如果你需要为每个子元素添加其他的动画效果，比如位移 */
.slide-fade-enter-active {
  transform: translateY(10px);
}

.slide-fade-enter-to {
  transform: translateY(0);
}

.slide-fade-leave-active {
  transform: translateY(0);
}

.slide-fade-leave-to {
  transform: translateY(10px);
}
</style>
